//非通用
//sprite的配置逻辑
define(['jquery', '../../com/base'], function($, Base) {

  return Base.extend({
    initializer: function() {
      this.bind();
    },
    bind: function() {
      var self = this;

      self.controls = {};

      self.controls.interval    = $('.J_interval');
      self.controls.spriteClass = $('.J_spriteClass');
      self.controls.classPrefix = $('.J_prefix');
      self.controls.classSuffix = $('.J_suffix');
      self.controls.direction   = $('.J_direction');
      self.controls.background  = $('.J_color');

      for (var control in self.controls) {
        self.bindControlEvent(control, self.controls[control]);
      }
    },
    bindControlEvent: function(attr, control) {
      var self = this;
      control.on('change', function() {
        if(self.valid(attr, this.value)){
          this.style.backgroundColor = 'transparent';
          self.get('canvas').set(attr, this.value);
        }else{
          this.style.backgroundColor = 'red';
        }
      });
    },
    valid: function(attr, value){
      switch(attr){
        case 'interval':
          var integerVal = parseInt(value);
          return integerVal === integerVal;
        case 'spriteClass':
          return /^[a-zA-Z][a-zA-Z0-9\-]*$/.test(value.trim());
        case 'classPrefix':
          return value.length === 0 || /^[a-zA-Z][a-zA-Z0-9\-]*$/.test(value.trim());
        case 'classSuffix':
          return value.length === 0 || /^[a-zA-Z0-9\-]*$/.test(value.trim());
        case 'background':
          return value.length === 0 || /^#[a-fA-F0-9]{3}([a-fA-F0-9]{3})?$/.test(value.trim());
      }
      return true;
    }
  },
  {
    canvas: {}
  });

});

